<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue模版语法</title>
</head>
<body>
  <div id="root">
  </div> 

  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: 'Hi Vue',
          v_once: 'v-once',
          v_html: '<h1>Hello Vue</h1>',
          dynamicId: 1,
          show: true,
          event: 'mouseenter',
          attrs: 'test',
        }
      },
      methods: {
        onClick() {
          console.log('click');
        }
      },
      // 模版
      // {{ xxx }} 插值表达式
      // vue 指令 v-xxx
      // template: '<div v-once ><h1>{{ v_once }}</h1></div>'
      // template: '<div v-html="v_html"></div>'
      // template: '<div :id="dynamicId"></div>'
      // template: '<div>{{ 1+1 }}</div>' // JS 表达式
      // template: '<div v-if="show">Hello Vue</div>' // 括号要去掉
      // template: '<div @click="onClick"><h1>Hi Vue</h1></div>'
      // template: '<div @[event]="onClick" :[attrs]="dynamicId">Mouse</div>'
      template: `
        <form action="https://www.baidu.com" @click.prevent="onClick"> 
          <button type="submit">commit</button>
        </form>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>
</html>